<template>
	<view class="order-list">
		<navbar :showBack="true">我的订单</navbar>
		<view>
			<u-tabs-swiper ref="uTabs" gutter="60" height="80" active-color="#e93323" :bold="false" :list="list" :current="current" @change="tabsChange" :is-scroll="true" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper" :style="'height: calc(100vh - '+hei+'rpx);'">
			<swiper-item class="swiper-item" v-for="(item,index) in list" :key="index">
				<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom" v-if="JSON.stringify(item.orderList) != '[]'" :style="'height: calc(100vh - '+hei+'rpx);'">
					<navigator :url="'/pages/pack/order_detail/order_detail?order_id='+item2.order_id" class="scroll-view-item" v-for="(item2,index2) in item.orderList" :key="index2">
						<view class="title acea-row row-between-wrapper">
							<view class="acea-row row-middle">{{item2._add_time}}</view>
							<view class="font-color" v-if="item2.paid==0">未付款</view>
							<view class="font-color" v-if="item2.paid!=0&&item2.refund_status==0">{{item2.status | setStatus}}</view>
							<view class="font-color" v-if="item2.refund_status!=0">{{item2.refund_status | setRefund}}</view>
						</view>
						<view class="item-info acea-row row-between row-top" v-for="(item3,index3) in item2.cartInfo" :key="index3">
							<view class="pic"><image :src="item3.productInfo.image" mode=""></image></view>
							<view class="text acea-row row-between">
								<view class="name line2">{{item3.productInfo.store_name}}</view>
								<view class="money">
									<view>￥{{item3.productInfo.price}}</view>
									<view>x{{item3.cart_num}}</view>
								</view>
							</view>
						</view>
						<view class="totalPrice" v-if="item2.paid==0">
							共{{item2.total_num}}件商品，需付款
							<text class="money font-color">￥{{item2.pay_price}}</text>
						</view>
						<view class="bottom acea-row row-right row-middle" v-if="item2.paid==0">
							<view class="bnt cancelBnt" @click.stop="orderCancel(item2.order_id)">取消订单</view>
							<view class="bnt bg-color" @click.stop="openPay(item2.order_id)">立即付款</view>
						</view>
						<view class="bottom acea-row row-right row-middle" v-else>
							<view class="bnt bg-color">查看详情</view>
						</view>
					</navigator>
					<u-loadmore :status="item.status" bg-color="#f2f2f2" margin-bottom="20"/>
				</scroll-view>
				<view class="no-orderList" v-else :style="'height: calc(100vh - '+hei+'rpx);'">
					<image src="../../static/images/noOrder.png" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<payType-window :show="showPay" :showIcon="false" :payType="payType" @close="closePay" @changeType="changeType"></payType-window>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "@/api/api.js";
	const app = getApp();
	export default{
		data(){
			return{
				current:0,
				swiperCurrent:0,
				type:0,
				loop:0,
				hei:0,
				showPay:false,
				order_id:"",
				goshow:false,
				list: [{
						name: '待付款',
						id:0,
						type:0,
						page:1,
						limit:5,
						status:"loadmore",
						orderList:[]
					}, {
						name: '待发货',
						id:1,
						type:1,
						page:1,
						limit:5,
						status:"loadmore",
						orderList:[]
					}, {
						name: '待收货',
						id:2,
						type:2,
						page:1,
						limit:5,
						status:"loadmore",
						orderList:[]
					}, {
						name: '待评价',
						id:3,
						type:3,
						page:1,
						limit:5,
						status:"loadmore",
						orderList:[]
					}, {
						name: '已完成',
						id:4,
						type:4,
						page:1,
						limit:5,
						status:"loadmore",
						orderList:[]
					},{
						name: '退款',
						id:5,
						type:-3,
						page:1,
						limit:5,
						status:"loadmore",
						orderList:[]
					}
				]
			}
		},
		onLoad(e) {
			this.hei = app.globalData.navHeight + 80;
			this.init(e)
		},
		onShow() {
			if(this.goshow){
				this.reload()
			}
		},
		filters:{
			setStatus:function(e){
				switch(e){
					case 0:
						return "待发货"
					break;
					case 1:
						return "待收货"
					break;
					case 2:
						return "待评价"
					break;
					case 3:
						return "已完成"
					break;
				}
			},
			setRefund:function(e){
				switch(e){
					case 1:
						return "申请中"
					break;
					case 2:
						return "已退款"
					break;
				}
			}
		},
		methods:{
			async init(e){
				uni.showProgress();
				uni.setProgressPercent(20)
				let list = this.list;
				let l = 80/list.length;
				for(let i of list){
					await this.getOrderList(i.page,i.limit,i.type)
					let s = 20 + l*(i.id+1); 
					uni.setProgressPercent(s)
				}
				this.goshow = true
				uni.closeProgress()
				if(JSON.stringify(e) != "{}"){
					this.swiperCurrent = e.type;
				}
			},
			async reload(current){
				const that = this;
				uni.showProgress();
				uni.setProgressPercent(20)
				let params = {};
				let list = this.list;
				let l = 80/list.length;
				for(let i of list){
					await this.reloadOrderList(i.page,i.limit,i.type)
					let s = 20 + l*(i.id+1); 
					uni.setProgressPercent(s)
				}
				uni.closeProgress()
			},
			reloadOrderList:function(page,limit,type){
				const that = this;
				let params = {page,limit,type};
				let list = this.list;
				list.find(f=>f.type==type).status = "loading";
				this.list = list
				return new Promise((resolve, reject) => {
					api.order.getOrderList(params).then(e=>{
						let d = list.find(f=>f.type==type);
						if(e.status = 200){
							if(JSON.stringify(e.data) != "[]"){
								d.orderList = e.data;
								d.page = page;
								d.status = "loadmore";
							}else{
								d.status = "nomore";
							}
						}else{
							uni.showToast({
								title:e.msg,
								icon:"none"
							})
						}
						// console.log("list",list)
						that.list = list
						resolve("ok")
					})
				})
			},
			getOrderList:function(page,limit,type){
				const that = this;
				let params = {page,limit,type};
				let list = this.list;
				list.find(f=>f.type==type).status = "loading";
				this.list = list
				return new Promise((resolve, reject) => {
					api.order.getOrderList(params).then(e=>{
						let d = list.find(f=>f.type==type);
						if(e.status = 200){
							if(JSON.stringify(e.data) != "[]"){
								d.orderList = d.orderList.concat(e.data);
								d.page = page;
								d.status = "loadmore";
							}else{
								d.status = "nomore";
							}
						}else{
							uni.showToast({
								title:e.msg,
								icon:"none"
							})
						}
						// console.log("list",list)
						that.list = list
						resolve("ok")
					})
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				console.log("tabsChange")
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// console.log("animationfinish",e.detail.current)
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				let current = this.current;
				let i = this.list.find(e=>e.id==current)
				this.getOrderList(i.page+1,i.limit,i.type)
				// console.log("onreachBottom",current)
			},
			orderCancel:function(id){ // 取消订单
				const that = this;
				let current = this.current;
				let orderList = this.list[current].orderList;
				let orderList_idx = orderList.findIndex(e=>e.order_id == id)
				uni.showModal({
					title:"是否删除？",
					success(e) {
						console.log(e)
						if(e.confirm){
							api.order.orderCancel(id).then(e=>{
								uni.showToast({
									title:e.msg,
									icon:"none"
								})
								if(e.status == 200){
									orderList.splice(orderList_idx,1)
									that.list[current].orderList = orderList
								}
							})
						}
					}
				})
			},
			changeType:function(paytype){ // 跟换支付方式
				let order_id = this.order_id;
				let from = "weixin";
				let current = this.current;
				let orderList = this.list[current].orderList;
				let orderList_idx = orderList.findIndex(e=>e.order_id == order_id)
				const that = this;
				console.log(paytype,order_id,orderList_idx,orderList)
				api.order.orderPay(order_id,paytype,from).then(e=>{
					uni.showToast({
						title:e.msg,
						icon:"none"
					})
					if(e.status == 200){
						orderList.splice(orderList_idx,1)
						that.list[current].orderList = orderList
					}
				})
			}, 
			openPay:function(id){
				this.order_id = id;
				this.showPay = true
			},
			closePay:function(){
				this.showPay = false
			}
		}
	}
</script>

<style>
	.order-list .swiper{
		width: 100%;
	}
	.order-list .swiper .swiper-item .scroll-view{
		background-color: #f2f2f2;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item{
		width: 690rpx;
		margin: 16rpx auto 0;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item:last-of-type{
		margin: 16rpx auto;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .title{
		height: 84rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .item-info{
		padding: 0 30rpx;
		margin-top: 22rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .item-info .pic{
		width: 120rpx;
		height: 120rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .item-info .pic image{
		border-radius: 6rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .item-info .text{
		width: 486rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .item-info .text .name{
		width: 306rpx;
		color: #282828;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .item-info .text .money{
		text-align: right;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .totalPrice{
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .totalPrice .money{
		font-size: 28rpx;
		font-weight: bold;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .bottom{
		height: 107rpx;
		padding: 0 30rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .bottom .bnt{
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .bottom .bnt:nth-child(2){
		margin-left: 17rpx;
	}
	.order-list .swiper .swiper-item .scroll-view .scroll-view-item .bottom .bnt.cancelBnt{
		border: 1rpx solid #ddd;
		color: #aaa;
	}
	.order-list .swiper .swiper-item .no-orderList{
		width: 100%;
		background-color: #f2f2f2;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 50rpx;
	}
	.order-list .swiper .swiper-item .no-orderList image{
		width: 414rpx;
		height: 336rpx;
	}
	.order-list .swiper .swiper-item .no-orderList text{
		font-size: 26rpx;
		color: #999;
	}
</style>
